<template>
  <select
    v-model="currentValue"
    class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary text-sm appearance-none bg-white"
    @change="$emit('input', currentValue)"
  >
    <option
      v-for="option in options"
      :key="option.value"
      :value="option.value"
    >
      {{ option.label || option.value }}
    </option>
  </select>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  props: {
    value: {
      type: [String, Number, Boolean],
      default: null
    },
    options: {
      type: Array,
      required: true,
      validator: (value) => {
        return value.every(option => 'value' in option);
      }
    }
  },
  emits: ['input'],
  setup(props) {
    const currentValue = ref(props.value);

    // 监听外部值变化
    watch(
      () => props.value,
      (newVal) => {
        currentValue.value = newVal;
      }
    );

    return {
      currentValue
    };
  }
};
</script>
    